<template>
<div>
  <div class="div-inquire">
    <div class="div-inquire-left">
      <el-form v-model="params" ref="paramsRefs" inline>
        <el-form-item  label="资料名称" prop="name" label-width="70px" >
          <el-input v-model="params.name" @clear="clearName" placeholder="请输入资料名称" clearable></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="clickReset" plain>重置</el-button>
      <el-button @click="clickSearch" type="primary">搜索</el-button>
    </div>
    <div class="div-inquire-right">
        <el-button icon="el-icon-plus" type="primary" @click="showUploadDialog">上传资料</el-button>
    </div>

  </div>
  <div class="div-table">
    <el-table
      ref="multipleTable"
      :data="tableData"
      :header-cell-style="{background:'#F5F7FA'}"
      style="width: 100%"
      v-loading="dataListLoading">
<el-table-column label="资料名称" prop="name" align="center"></el-table-column>
<el-table-column label="上传日期" prop="createTime" align="center"></el-table-column>
<el-table-column label="操作" align="center">
  <template slot-scope="scope">
    <el-button type="text" style="color: #6E92E9" @click="clickDownload(scope.row)">下载</el-button>
    <span >|</span>
    <el-button type="text" style="color: #E96E6E" @click="clickDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>
    </el-table>
    <el-pagination
      @size-change="changePageSize"
      @current-change="turnToPage"
      :current-page="queryInfo.pageIndex"
      :page-sizes="[5, 10, 20, 50, 100, 200]"
      :page-size="queryInfo.pageSize "
      layout="total, prev, pager, next, sizes, jumper"
      :total="totalPage"
      id="div-e-paging-id">
    </el-pagination>
  </div>
  <el-dialog
    title=""
    :visible.sync="uploadDialogVisible"
    width="30%"
    >
    <h3 slot="title">上传资料</h3>
    <el-upload
          class="upload-demo"
          style=" display: flex;flex-direction: column;justify-content: center;align-items: center;"
          drag
          ref="uploadRefs"
          accept=".xls,.xlsx"
          :headers="uploadHeader"
          :action="uploadUrl"
          :on-success="successUploadHandler"
          :on-error="errorUploadHandler"
          :on-change="changeUploadHandler"
          :on-exceed="exceedUploadHandler"
          :on-remove="removeUploadHandler"
          :file-list="fileList"
          :limit="1"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
        </el-upload>
    <span slot="footer" class="dialog-footer">
    <el-button @click="uploadDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="clickUpload">确 认</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import {paging} from '../../../../api/customer/potential'
import {deleteMaterial, uploadMaterial} from '../../../../api/customer/apply'
import Vue from 'vue'

export default {
  name: 'enteprise-details-apply',
  props: {
    id: {
      type: Number,
      default: null
    }
  },
  created () {
    this.paging()
  },
  data () {
    return {
      tableData: [],
      fileList: [],
      fileUrl: '',
      fileName: '',
      dataListLoading: false,
      uploadDialogVisible: false,
      params: {
        name: ''
      },
      queryInfo: {
        pageIndex: 1,
        pageSize: 20
      },
      totalPage: 1
    }
  },
  methods: {
    paging () {
      this.dataListLoading = true
      paging(
        '/ent/customer/material/paging',
        {
          'conditions': {
            'name': this.params.name,
            'createByName': ''
          },
          'inOrder': '',
          'orderBy': '',
          'pageNum': this.queryInfo.pageIndex,
          'pageSize': this.queryInfo.pageSize
        },
        'post',
        (data) => {
          this.tableData = data.data.records
          this.dataListLoading = false
        }
      )
    },
    changePageSize (val) {
      this.queryInfo.pageSize = val
    },
    turnToPage (val) {
      this.queryInfo.pageIndex = val
    },
    clickReset () {
      this.$refs['paramsRefs'].resetFields()
      this.params.name = ''
      this.paging()
    },
    clickSearch () {
      this.paging()
    },
    clickDownload (row) {
      window.open(row.fileUrl)
    },
    clickDelete (row) {
      this.$confirm(
        `确认要删除资料 ${row.name} 吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMaterial(row.id, () => { this.paging() })
        })
    },
    // 显示上传资料对话框
    showUploadDialog () {
      this.uploadDialogVisible = true
    },
    // 上传文件
    clickUpload () {
      uploadMaterial(
        {
          'name': this.fileName,
          'fileUrl': this.fileUrl,
          'customerId': this.id
        },
        (data) => {
          this.$message.success('上传成功!')
          this.paging()
          this.$refs.uploadRefs.clearFiles()
        }
      )
      this.uploadDialogVisible = false
    },
    successUploadHandler (response, file, fileList) {
      // console.log('res', response)
      if (response.code === 0) {
        this.fileUrl = response.data.remoteUrl + response.data.fileName
      } else {
        this.$message.error(response.msg)
      }
    },
    errorUploadHandler (err, file, fileList) {
      console.log('err', err)
    },
    exceedUploadHandler (file, fileList) {
      if (this.fileList) {
        this.$refs.uploadRefs.clearFiles()
        this.fileList.push(file[0])
        this.fileName = file[0].name
      }
    },
    removeUploadHandler (file, fileList) {},
    changeUploadHandler (file, fileList) {
      this.fileName = file.name
    },
    clearName () {
      this.paging()
    }
  },
  computed: {
    uploadUrl () {
      return this.$http.adornUrl('/ent/customer/file/upload')
    },
    uploadHeader () {
      return {
        'token': Vue.cookie.get('token')
      }
    },
    uploadData () {
      return this.$http.adornData({'customerId': this.id})
    }

  }
}
</script>

<style lang="less" scoped>
.div-inquire{
  display: flex;
  justify-content: space-between;
  .div-inquire-left{
    display: flex;
    align-items: flex-start;
  }
  .div-inquire-right{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
}
</style>
